<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery模拟微博、QQ空间等地方常用的图片放大缩小效果</title>
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.artZoom.js"></script>
<link href="css/jquery.artZoom.css" rel="stylesheet" type="text/css">
<script>
jQuery(function ($) {
	$('.artZoom').artZoom({
		path: './images',	// 设置artZoom图片文件夹路径
		preload: true,		// 设置是否提前缓存视野内的大图片
		blur: true,			// 设置加载大图是否有模糊变清晰的效果
		
		// 语言设置
		left: '左旋转',		// 左旋转按钮文字
		right: '右旋转',		// 右旋转按钮文字
		source: '看原图'		// 查看原图按钮文字
	});
});
</script>
</head>
<body>
<center>
<div id="lanrenzhijia">
  <h2>演示</h2>
  <ul class="imgList">
    <li> <a href="images/01.jpg" rel="images/01.jpg"><img class="artZoom" src="images/01m.jpg" /></a> </li>
    <li> <img class="artZoom" src="images/03m.jpg" data-artZoom-show="images/03.jpg" data-artZoom-source="images/03m.jpg" /> </li>
    <li> <a href="images/04.jpg" data-artZoom-source="images/04.jpg"> <img class="artZoom" src="images/04m.jpg" data-artZoom-source="images/01m.jpg" /> </a> </li>
    <li> <a href="images/05.jpg" rel="images/05.jpg"><img class="artZoom" src="images/05m.jpg" /></a> </li>
  </ul>
  <p>下面是一张特别长的图片，这种种图片在微博中非常常见，如果使用artZoom，用户将无需等待图片完全下载完毕即可观看大图：</p>
  <p><img class="artZoom" src="images/min.jpg" data-artZoom-show="images/big.jpg" data-artZoom-source="images/big.jpg" /></p>
</div>
</center>
</body>
</html>